<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<!-- 用来将jsx语法转化为js语法 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
<script type="text/babel">
    /* 
        生命周期：组件从创建到销毁的这个过程就是组件的生命周期
      */

    /*
     class类组件的生命周期分为三个阶段：

      1.组件初始化阶段
       constructor：当组件创建时立即调用 在这个阶段可以定义属性，还可以定义状态，还可以绑定this指向，不推荐在这个生命周期中使用this.setState
       render:生成虚拟dom,渲染页面，在这个阶段可以渲染数据简单的做数据处理，坚决不可以在此生命周期调用this.setState 否则就会进入死循环
       compoentDidMount：组件渲染后 可以获取真实dom对象 可以做任意数据逻辑处理,可以调用this.setState,通常在此生命周期发送http请求请求数据

      2. 组件更新阶段
       render: 生成新的虚拟节点
       componentDidUpdate :组件更新后调用 只会执行一次 初始化不执行 当状态发生改变才会调用
       
      3. 组件卸载销毁阶段
       componentWillUnmount(): 组件卸载时调用 ，清楚全局变量 定时器等等
    */
    class App extends React.Component {
        constructor() {
            super();
            console.log('组件创建了');
        }
        state = {
            list: [],
            isShow: true
        }
        render() {
            console.log('渲染中');
            return (
                <div>
                    <h1>组件的生命周期</h1>
                    {this.state.isShow && <Child />}
                    <button onClick={() => {
                        this.setState({
                            isShow: !this.state.isShow
                        })
                    }}>切换</button>

                    <ol>
                        {
                            this.state.list.map((item, index) => {
                                return <li key={index}>{item.name}</li>
                            })
                        }
                    </ol>
                </div>
            )
        }
        //  通常在该生命周期请求数据
        componentDidMount() {
            console.log("组件渲染后")
            let xhr = new XMLHttpRequest();
            xhr.open("get", 'https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js');
            xhr.send();
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    let res = JSON.parse(xhr.response);
                    console.log(res)
                    this.setState({
                        list: res.hero
                    })
                }
            }
        }
        componentDidUpdate() {
            console.log("更新啦")
        }

    }
    class Child extends React.Component {
        state = {
            timer: null
        }
        render() {
            return (
                <div>
                    <h1>子组件</h1>
                </div>
            )
        }
        componentDidMount() {
            this.state.timer = setInterval(() => {
                console.log(111);
            }, 1000)
            this.setState({
                timer: this.state.timer
            })
        }
        componentWillUnmount() {
            console.log('组件卸载拉');
            clearInterval(this.state.timer)
        }
    }
    ReactDOM.render(<App />, document.getElementById('root'))
</script>

</html>